<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { upload } from '@/api/file'
import { update, getComplaint } from '@/api/complaint'
import type { Complaint } from '@/api/complaint/type'
import { toast } from '@/utils/common'
import { baseUrl } from '@/config'
import { BaseResponse } from '@/api/base'

const complaint = ref<Complaint>({})
const form = ref()

const loadComplaint = async (id: number) => {
  try {
    const res: BaseResponse = await getComplaint(id)
    complaint.value = res.data
    if (complaint.value.pic) {
      complaint.value.picArr = complaint.value.pic.split(',').map((item: any) => {
        return {
          url: baseUrl + item,
          status: 'success',
          message: ''
        }
      })
    } else {
      complaint.value.picArr = []
    }
  } catch (error) {
    toast(error.tips)
  }
}

onLoad(async (option: any) => {
  loadComplaint(option.id)
})

const afterRead = (e: any) => {
  try {
    let fileList = [].concat(e.file)
    const picArr = complaint.value.picArr
    let fileListLen = picArr.length
    fileList.map((item: any) => {
      picArr.push({
        ...item,
        status: 'uploading',
        message: '上传中'
      });
    })
    fileList.forEach(async (file: any) => {
      const res: BaseResponse = await upload(file.url, file.name)
      let item = picArr[fileListLen];
      picArr.splice(
        fileListLen,
        1,
        Object.assign(item, {
          status: 'success',
          message: '',
          url: res.data.actionUrl
        })
      )
      fileListLen++
    })
  } catch (e) {
    console.log(e)
    toast('上传失败')
  }
}
const deletePic = (e: any) => {
  complaint.value.picArr.splice(e.index, 1)
}
const publish = async () => {
  // 发布
  if (complaint.value.content === '') {
    toast('请输入内容')
    return
  }
  complaint.value.pic = complaint.value.picArr.map(item => item.url.substring(item.url.indexOf('files') - 1)).join(',')
  try {
    await update(complaint.value)
    toast('发布成功')
    uni.navigateBack()
    uni.$emit('backRefresh')
  } catch (e) {
    toast('发布失败')
  }
}
</script>

<template>
  <view class="complaint-create">
    <uv-form :model="complaint" ref="form">
      <uv-form-item prop="content">
        <uv-textarea height="400rpx" v-model="complaint.content" count border="none" maxlength="1000"
          placeholder="请输入内容">
        </uv-textarea>
      </uv-form-item>
      <uv-upload uploadIcon="plus" :fileList="complaint.picArr" name="pic" multiple :maxCount="9" @afterRead="afterRead"
        :previewFullImage="true" @delete="deletePic"></uv-upload>
    </uv-form>
    <view class="create-bottom">
      <uv-button @click="publish" text="立即发布" color="#ff7744"></uv-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.complaint-create {
  padding: 0 20rpx;
  height: calc(100vh - 100rpx);
  background-color: #fff;
}

.create-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: calc(100% - 40rpx);
  background-color: #fff;
  padding: 20rpx;
  display: flex;
  justify-content: flex-end;
}
</style>
